<template>
  <view class="progress-wrap">
    <view :class="isBlue ? 'blue':'red'" class="wrap" v-for="(item,index) of list" :key="index">
      <view class="wrap-title">{{item.key}}</view>
      <view class="progress-wrap">
        <view class="progress" :style="{width: getWidth(item.value), transition: 'all .3s'}" >
          <view class="count">{{item.value}}件</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'progress',
  props: {
    list: {
      type:Array,
      default() {
        return []
      }
    },
		isBlue: {
			type:Boolean,
			default: true
		}
  },
  computed: {
    total() {
      const result = []
      this.list.map((item) => {
        result.push(item.value)
      })
      return Math.max(...result)
    }
  },
  watch: {
    list(val) {
      console.log(val)
    }
  },
  data() {
    return {
    }
  },
  methods: {
    getWidth(count) {
			return `${Math.round(count/this.total)*100}%`
    }
  }
}

</script>
<style lang='scss' scoped>
.progress-wrap{
	width: 80%;
}
.wrap{
  width: 100%;
  display: flex;
	align-items: center;
	height: 20upx;
	margin-top: 30upx;
	.wrap-title{
		font-size: 20upx;
		width: 100upx;
		line-height: 20upx;
	}
  .progress-wrap{
    flex: 1;
    background-color: transparent;
    height: 20upx;
    display: flex;
    align-items: center;
    .progress {
      position: relative;
      height: 100%;
			border-radius:10px;
			transition: all .3s;
			width: 0;
    }
    .count {
      position: absolute;
      right: -52upx;
      top: 50%;
      transform: translateY(-50%);
			font-size: 20upx;
    }
  }
}
.blue{
	.wrap-title{
		color: #24BCF9
	}
	.progress-wrap{
		.progress{
			background-color: #24BCF9;
		}
		.count{
			color: #24BCF9
		}
	}
}
.red{
	.wrap-title{
		color: #43CF90
	}
	.progress-wrap{
		.progress{
			background-color: #43CF90;
		}
		.count{
			color: #43CF90
		}
	}
}
</style>